<template>
    <div>

        <basic-container  v-if="true" >
            <div style="height: 300px;text-align: center;">
                <div style="display: inline-block;margin-top: 130px;color: #b7b5b5;letter-spacing: 5px;">该功能待开发</div>
            </div>
        </basic-container>
        <basic-container v-else>
            <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
                <el-col :span='4' align='left'>
                    <el-form-item>
                        <el-button type="primary" size="small" @click.stop="handleAdd()">添加</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span='20' align='right'>
                    <el-form-item label="状态:">
                        <el-select v-model="formSearch.status" placeholder="状态" >
                            <el-option label="全部" :value='0' ></el-option>
                            <el-option  v-for='v in itemsStatus' :key='v.id' :label="v.name" :value='v.id' ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formSearch.name" placeholder="请输入系统名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
                    </el-form-item>
                </el-col> 
            </el-form>
            <!-- 表格 -->
            <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentPage'>
                <!-- <template slot-scope="scope" slot="handleTime">
                    {{scope.row.status==1?'未留样':'已留样'}}
                </template> -->
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary" size="small"  plain @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
                    <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
                </template>
            </avue-crud>
        </basic-container>
        <!-- 修改/新增-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="40%" class="diading" >
            <el-form ref="dialogForm"  :model="dialogForm" :rules="rules"    label-position="left" label-width="100px"  >

                <el-form-item label="系统名称：" prop='name'>
                    <el-input v-model="dialogForm.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="连接地址:" prop='url'>
                    <el-input v-model="dialogForm.url" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop='order'>
                    <el-input v-model="dialogForm.order" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="图标：" prop='info'>
                    <el-upload :action="actionUrl"  :headers="uploadHeaders" name="file" :show-file-list="false" accept="image/*"
                        :on-success="uploadSuccess" :on-error="uploadError"    class="avatar-uploader">
                        <img v-if="dialogForm.url" :src="dialogForm.url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否启用：" prop='status'>
                    <el-radio-group v-model="dialogForm.status">
                        <el-radio  v-for='v in itemsStatus'  :key='v.id' :label="v.name" :value='v.id'></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
                <el-button  size="small" @click="dialogFormVisible = false">关 闭</el-button>
                <el-button  size="small" type="primary" @click="handleAddLine('dialogForm')">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { listOption } from "@/const-personal/sysManage/index.js"
    import { validateAcquaintance } from "@/util/validate.js"
    export default {
        name: "sysManage",
        data() {
            return {
                formSearch:{
                    stutas:0,
                    name:''
                },
                tableOption:listOption,
                tableData:[{id:0,status:2},{id:2,status:1}],//数据
                page: {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10, //每页显示多少条
                    pageSizes:[10]
                },
                tableLoading:false,
                itemsStatus:[//状态
                    {id:1,name:'已启用'},
                    {id:2,name:'已停用'},
                ],
                 // 修改/新增
                dialogTitle:'人员添加',
                dialogFormVisible:false,
                dialogForm:{},
                rules:{
                    name:[{required: true,message: '系统姓名不能为空',trigger: 'blur'}],
                    url:[{required: true,message: '连接地址不能为空',trigger: 'blur'}],
                    order:[{required: false,validator: validateAcquaintance,trigger: 'change',type:'number'}],
                    status:[{required: true,message: '请选择系统状态',trigger: 'change'}],
                },
                // 上传图片
                actionUrl:'',
                // actionUrl: `${uploadUrl}/smart-community-property-consumer/consumer/file/upload`,
				uploadHeaders: {
					// Authorization: TOKEN
                },
            }
        },
        methods:{
            // 点击搜索
            searchFormSubmit(){

            },
            // 切换页面
            currentPage(val){
                console.log(val)
            },
            // 点击添加
            handleAdd(){
                this.dialogFormVisible=true;
                this.dialogTitle='添加项目';
                this.dialogForm={
                    order:'',
                    name:'',
                    url:'',
                    icon:'',
                    status:''
                }
            },
            // 修改
            handleEdit(row,index){
                console.log(row,index)
                this.dialogFormVisible=true;
                this.dialogTitle='修改项目';
            },
            // 删除
            handleDelete(row,index){

            },
            // 确认新增/修改
            handleAddLine(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$refs[formName].resetFields();
                    }
                })
            },
             // 图片上传成功
			uploadSuccess(response, file) {
				if (response.code === 200) {
					// delete response.data.createTime;
					// this.dialogForm.imagesFiles[0] = response.data;
					// this.dialogForm.url=response.data.url;
					this.MS("图片上传成功");
				} else {
					this.$message.error(response.message);
				}
			},
			// 图片上传失败
			uploadError(err, file) {
				console.log(err)
			}
        }
    }
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 165px;
    height: 165px;
    line-height: 165px;
    text-align: center;
}
</style>